<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>htmlcss 阶段</title>
    <style>
        body {
            margin: 0;
        }

        .wrap {
            width: 600px;
            margin: 0 auto;
            background-color: #f0f0f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 50px 20px;
        }

        .wrap .left {
            display: flex;
        }

        .wrap .left>div {
            margin: 0 20px;
        }

        .wrap .left>div span {
            display: block;
        }

        .wrap .right img {
            width: 80px;
        }
    </style>
</head>

<body>

    <!-- <div class="wrap">
        <div class="left">
            <div>27°C</div>
            <div>
                <span>广州</span>
                <span>中雨 空气质量 优</span>
            </div>
        </div>
        <div class="right">
            <img src="./img/中雨.png" alt="">
        </div>
    </div> -->

    <script>
        // 要求：
        // 根据参数获取不同城市的天气数据, 把获取的天气数据渲染在页面上

        // 构造函数名称:  Weather
        // 属性： data (数据)   currentWeather（当前城市的数据，初始化为null）
        // 方法：
        //  getWeather  根据参数调用该方法，比如，城市名或者id名，可以获取城市数据
        //  render      调用该方法渲染数据

        // 例如：
        // var w1 = new Weather();
        // var cur = w1.getWeather("广州");// 获取输入1
        // console.log(cur);// {tem: "27°C", city: "广州", id: 1, wea: "中雨", air: "空气质量 优", …}
        // w1.render();// 渲染数据在页面，如图所示



        // 思考：在构造函数上添加属性，在原型上添加方法。
        // 对象的成员(属性和方法)


        // 构造函数
        function Weather() {
            // 添加属性
            this.data = [
                { tem: "27°C", city: "广州", id: 1, wea: "中雨", air: "空气质量 优", src: "img/中雨.png" },
                { tem: "29°C", city: "上海", id: 2, wea: "多云", air: "空气质量 良", src: "img/多云.png" },
                { tem: "28°C", city: "北京", id: 3, wea: "晴朗", air: "空气质量 差", src: "img/晴朗.png" },
                { tem: "30°C", city: "海口", id: 4, wea: "阴天", air: "空气质量 优", src: "img/阴天.png" }
            ]
            this.currentWeather = null;
        }
        // 原型对象
        // 添加方法（1）
        Weather.prototype.getWeather = function(param) {
            // 循环data数组
            for(var i = 0 ; i < this.data.length ; i ++){
                // 判断参数是否与数据中的city或id相匹配
                if(param == this.data[i].city || param == this.data[i].id){
                     // 赋值 
                     this.currentWeather = this.data[i];
                     // 跳出当前的循环
                     break;
                }
            }
            // 返回当前城市的数据
            return  this.currentWeather;
        }
        // 添加方法（2）
        Weather.prototype.render = function () {
            // 判断currentWeather是否有值
            if(this.currentWeather == null){
                console.log("不存在当前城市!");
                // 终止代码
                return ;
            }
            // 字符串的拼接
            var str = '';
                str +='<div class="wrap">'
                str +='    <div class="left">'
                str +='        <div>'+this.currentWeather.tem+'</div>'
                str +='        <div>'
                str +='            <span>'+this.currentWeather.city+'</span>'
                str +='            <span>'+this.currentWeather.wea+' '+this.currentWeather.air+'</span>'
                str +='        </div>'
                str +='    </div>'
                str +='    <div class="right">'
                str +='        <img src="'+this.currentWeather.src+'" alt="">'
                str +='    </div>'
                str +='</div>'
            // 渲染字符串（ document.write 不在开阶段使用）
            document.write(str);
        }

        // 创建实例对象
        var w1 = new Weather();
        // 通过实例对象调用原型上的方法
        var cur = w1.getWeather("北京");//可以传递城市名或 id名
        // console.log(cur);
        // 通过实例对象调用原型上的方法
        w1.render();

        // console.log(w1.width); // undefined
        // w1.foo();






    </script>
</body>

</html>